import { defineComponent, ref, watch } from 'vue';
import '../ButtonGroup/index.scss';

const ButtonGroup = defineComponent({
    name: 'ButtonGroup',
    props: {
        buttonList: {
            type: Array,
            default: () => {
                return []
            }
        },
        initActive: {
            type: Number,
            default: 0
        }

    },
    emits: ['clickButton'],
    setup(props, { slots, attrs, emit }) {
        const activeBIndex : any = ref(props.initActive);
        return () => {
          const { buttonList } = props;
          return (
            <div class="button-group-list">
              <ul>
                {buttonList?.map((v: any, i: any) => (
                  <li
                    class={[
                      {
                        'activeIndex':
                        activeBIndex.value === i
                      }
                    ]}
                    onClick={() => {
                        activeBIndex.value = i
                        emit('clickButton',i);
                      }}
                  >
                    {v.name}
                  </li>
                ))}
              </ul>
            </div>
          );
        };
      }
})

export default ButtonGroup